<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
    <div style="overflow: hidden">
        <el-backtop :bottom="100" :visibility-height="100"></el-backtop>
        <!--关键数据-->
        <el-card shadow="never" body-style="padding: 0px">
            <div>
                <div v-if="taskId">
                    <approve-card :display-return="false"
                                  :task="taskId"
                                  :busi-id="customerId"
                                  :buttons="['SUBMIT','INVALID']"
                                  :before-approve='validate'
                                  @runTask="runTask">
                        <ft-return-btn text="返回客户列表" @click="goBackList()" slot="busiButton"></ft-return-btn>
                        <ft-operation-log :source-id="customerId"
                                          slot="busiButton"
                                          style="float: right; margin-left: 10px;">
                        </ft-operation-log>
                    </approve-card>
                </div>
                <div v-else>
                    <ft-return-btn text="返回客户列表" @click="goBackList()" slot="busiButton"></ft-return-btn>
                    <ft-operation-log :source-id="customerId"
                                      slot="busiButton"
                                      style="float: right; margin-left: 10px;">
                    </ft-operation-log>
                </div>

                <el-row v-show="!editMain" style="padding: 20px 12px">
                    <el-col :span="4" align="left" style="line-height: 36px">
                        <span style="font-size: 14px;color: #747778">基础关键资料</span>
                    </el-col>
                </el-row>

                <div :class="{cardBackColor:!editMain}" style="margin: 20px 12px">
                    <el-row v-if="editMain">
                        <el-col align="left" style="white-space: nowrap" :span="23">
                            <span style="font-size: 28px;color: #2A2D2E;line-height: 36px;text-align: left">
                                <b>{{corp.customerName}}</b>
                            </span>
                            <br/>
                        </el-col>
                        <el-col align="right" :span="1">
                            <el-button v-show="editMain && editable" size="small" @click="edit()" plain>编辑</el-button>
                        </el-col>
                    </el-row>
                    <el-form ref="corp"
                             :model="corp"
                             :rules="rules"
                             style="text-align: left;padding-top: 12px" inline>
                        <el-row>
                            <el-col v-if="!editMain" :md="8" :lg="6">
                                <el-form-item label="客户名称" prop="customerName">
                                    <ft-input v-model="corp.customerName" :editing="!editMain">
                                    </ft-input>
                                </el-form-item>
                            </el-col>
                            <el-col :md="8" :lg="6">
                                <el-form-item label="证件类型" prop="identityType">
                                    <ft-enum-select v-model="corp.identityType"
                                                    service-name="lss-customer"
                                                    type-name="certificateType"
                                                    placeholder="请选择证件类型"
                                                    :editing="!editMain">
                                    </ft-enum-select>
                                </el-form-item>
                            </el-col>

                            <el-col :md="8" :lg="6">
                                <el-form-item label="证件号码" prop="identityNo">
                                    <span v-if="editMain">{{corp.identityNo}}</span>
                                    <el-input v-else v-model="corp.identityNo"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :md="8" :lg="6">
                                <el-form-item label="主办客户经理" prop="mainManagerId">
                                    <ft-user v-model="corp.mainManagerId"
                                             :editable="!editMain"
                                             :customerManagerId="corp.mainManagerId"
                                             @matchedOption="mainManagerChangeMatched"
                                             @unmatchedOption="mainManagerChangeMatched"/>
                                </el-form-item>
                            </el-col>

                            <el-col :md="8" :lg="6">
                                <el-form-item label="协办客户经理" prop="viceManagerId">
                                    <ft-user-with-filter ref="viceManagerRef"
                                                         v-model="corp.viceManagerId"
                                                         :editable="!editMain"
                                                         :customerManagerId="corp.viceManagerId"
                                                         @matchedOption="viceManagerChangeMatched"
                                                         @unmatchedOption="viceManagerChangeMatched">
                                    </ft-user-with-filter>
                                </el-form-item>
                            </el-col>

                            <el-col :md="8" :lg="6">
                                <el-form-item label="所属部门" prop="deptName">
                                    <ft-input :editing="false" v-model="corp.deptName"></ft-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="变更类型" prop="changeType">
                                    <ft-customer-change-type v-model="corp.changeType"
                                                             service-name="lss-customer"
                                                             type-name="customerChangeType"
                                                             :editable="!editMain">
                                    </ft-customer-change-type>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="变更说明" prop="changeRemark">
                                    <el-input v-if="!editMain"
                                              v-model="corp.changeRemark"
                                              :autosize="{ minRows: 1, maxRows: 5}"
                                              type='textarea'>
                                    </el-input>
                                    <span v-else class="form-textarea" :title="corp.changeRemark">
                                    {{corp.changeRemark}}
                                </span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <hr style="background-color: #EDEDED;border: none;height: 1px;margin: 0px"/>

                        <el-row>
                            <el-col align="right">
                                <el-button size="mini"
                                           @click="cancel()"
                                           :disabled="editMain"
                                           v-if="!editMain">取消
                                </el-button>
                                <el-button type="primary"
                                           size="mini"
                                           @click="onSave()"
                                           v-if="!editMain"
                                           style="margin-left: 24px"
                                           :disabled="editMain || saveStatus">保存
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>

            <!--详细信息-->
            <div>
                <el-dropdown
                        v-if="(!showTabInfo || !showTabShareholder || !showTabFinance ||  !showTabAtt || !showTabInv
                              || !showTabMar || !showTabGua) && editMain && editable"
                        @command="addTab"
                        class="add-tabs"
                        trigger="click"
                        :show-timeout="outTime" :hide-timeout="outTime"
                        style="float: right;z-index:999;position:relative;right: 12px;top: 9px;">
                    <el-button type="primary"
                               style="padding: 7px 18px 7px 8px;font-size: 14px;line-height: 20px;"
                               @click="" round>
                        <span style="padding: 2px 0px;">
                            <i class="joys-icon-addagain" style="margin-right: 18px;">
                                继续添加
                            </i>
                        </span>
                    </el-button>
                    <el-dropdown-menu slot="dropdown" style="background-color: #353737" class="add-tabs-menu">
                        <el-dropdown-item :disabled="showTabInfo" command="tabInfo" class="add-tabs-item">
                            <div style="font-size: 12px;line-height: 28px;margin: 7px 7px 2px">
                                <i class="joys-icon-checkreport" style="margin-left: 6px"/>
                                <span style="margin-left: 11px;margin-right: 27px">基本信息</span>
                            </div>
                        </el-dropdown-item>
                        <el-dropdown-item :disabled="showTabShareholder" command="tabShareholder" class="add-tabs-item">
                            <div style="font-size: 12px;line-height: 28px;margin: 7px 7px 2px">
                                <i class="joys-icon-checkreport" style="margin-left: 6px"/>
                                <span style="margin-left: 11px;margin-right: 27px">股东高管</span>
                            </div>
                        </el-dropdown-item>
                        <el-dropdown-item :disabled="showTabFinance" command="tabFinance" class="add-tabs-item">
                            <div style="font-size: 12px;line-height: 28px;margin: 7px 7px 2px">
                                <i class="joys-icon-checkreport" style="margin-left: 6px"/>
                                <span style="margin-left: 11px;margin-right: 27px">财报信息</span>
                            </div>
                        </el-dropdown-item>
                        <el-dropdown-item :disabled="showTabInv" command="showTabInv" class="add-tabs-item">
                            <div style="font-size: 12px;line-height: 28px;margin: 2px 7px 7px">
                                <i class="joys-icon-attachment" style="margin-left: 6px"/>
                                <span style="margin-left: 11px;margin-right: 27px">资产信息</span>
                            </div>
                        </el-dropdown-item>
                        <el-dropdown-item :disabled="showTabMar" command="showTabMar" class="add-tabs-item">
                            <div style="font-size: 12px;line-height: 28px;margin: 2px 7px 7px">
                                <i class="joys-icon-attachment" style="margin-left: 6px"/>
                                <span style="margin-left: 11px;margin-right: 27px">渠道及客户</span>
                            </div>
                        </el-dropdown-item>
                        <el-dropdown-item :disabled="showTabGua" command="showTabGua" class="add-tabs-item">
                            <div style="font-size: 12px;line-height: 28px;margin: 2px 7px 7px">
                                <i class="joys-icon-attachment" style="margin-left: 6px"/>
                                <span style="margin-left: 11px;margin-right: 27px">融资及担保</span>
                            </div>
                        </el-dropdown-item>
                        <el-dropdown-item :disabled="showTabAtt" command="tabAtt" class="add-tabs-item">
                            <div style="font-size: 12px;line-height: 28px;margin: 2px 7px 7px">
                                <i class="joys-icon-attachment" style="margin-left: 6px"/>
                                <span style="margin-left: 11px;margin-right: 27px">附件信息</span>
                            </div>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <div style="height: 54px;margin: 0px;display: flex;justify-content: space-around"
                     v-show="(!showTabInfo && !showTabShareholder && !showTabFinance &&  !showTabAtt && !showTabInv
                               && !showTabMar & !showTabGua) && editMain && editable">
                </div>

                <el-tabs v-model="tabsindex" @tab-click="tab" stretch>
                    <el-tab-pane v-if="showTabInfo" name="0" label="基本资料" style="background-color: #F0F3F6">
                        <div style="padding: 19px 24px">
                            <!--基本信息-->
                            <el-card>
                                <corp-info :customerId="customerId"
                                           @registeredAddress="invoiceAddress"
                                           :dataVersion="dataVersion"
                                           :editable="editable"
                                           v-on:infoValue="infoValue"/>
                            </el-card>
                            <!--联系人信息-->
                            <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
                                <linkman :customerId="customerId" :editable="editable"/>
                            </el-card>
                            <!--银行账户-->
                            <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
                                <bank-account :sourceBillId="customerId" :customerName="corp.customerName" :editable="editable"/>
                            </el-card>
                            <!--开票信息-->
                            <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
                                <cust-invoice :customerId="customerId"
                                              :customerName="corp.customerName"
                                              :identityType="corp.identityType"
                                              :identityNo="corp.identityNo"
                                              :invoiceAddress="registeredAddress"
                                              sourceBillType="lss_customer_corp"
                                              :editable="editable"/>
                            </el-card>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane v-if="showTabShareholder" name="1" label="股东高管信息">
                        <!--股东信息-->
                        <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
                            <Shareholder :customerId="customerId" :editable="editable"/>
                        </el-card>
                        <!--高管信息-->
                        <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
                            <CustManager :customerId="customerId" :editable="editable"/>
                        </el-card>
                        <!--实际控制人信息-->
                        <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
                            <ActualController :customerId="customerId" :editable="editable"/>
                        </el-card>
                    </el-tab-pane>

                    <el-tab-pane v-if="showTabFinance" name="2" label="财报信息">
                        <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
                            <iframe style="width: 100%;height: 700px;border:none;margin: 0;overflow: hidden" v-if="corp.stockCode"
                                    :src="fengbaoFinReportUrl"></iframe>
                            <finance-report v-else :customerId="customerId" :editable="editable"/>
                        </el-card>
                    </el-tab-pane>

                    <el-tab-pane v-if="showTabInv" name="3" label="资产信息">
                        <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
                            <investment :customerId="customerId" :editable="editable"></investment>
                        </el-card>
                    </el-tab-pane>

                    <el-tab-pane v-if="showTabMar" name="4" label="渠道及客户信息">
                        <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
                            <purchase-channels :customerId="customerId" :editable="editable"></purchase-channels>
                        </el-card>
                        <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
                            <sales-channels :customerId="customerId" :editable="editable"></sales-channels>
                        </el-card>
                    </el-tab-pane>

                    <el-tab-pane v-if="showTabGua" name="5" label="融资及担保信息">
                        <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
                            <financing-info :customerId="customerId" :editable="editable"></financing-info>
                        </el-card>
                        <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
                            <guarantee-info :customerId="customerId" :editable="editable"></guarantee-info>
                        </el-card>
                    </el-tab-pane>

                    <el-tab-pane v-if="showTabAtt" name="6" label="附件信息">
                        <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
                            <ft-attach v-if="corp&&corp.customerId" title="附件信息" sourceType="CUSTOMER"
                                       :sourceId="corp.customerId"
                                       :categories="attachClass"
                                       :categories-disabled="categoriesDisabled"
                                       :basePath="'/doc/generate/客户维护/'+corp.customerId"></ft-attach>
                        </el-card>
                    </el-tab-pane>
                </el-tabs>

            </div>
        </el-card>

    </div>
</template>

<script>
    import FinancingInfo from "../tabs/FinancingInfo"
    import GuaranteeInfo from "../tabs/GuaranteeInfo"
    import PurchaseChannels from "../tabs/PurchaseChannels"
    import SalesChannels from "../tabs/SalesChannels"
    import CorpInfo from "../tabs/CorpInfo"
    import Linkman from "../tabs/Linkman"
    import BankAccount from "../tabs/BankAccount"
    import CustInvoice from "../tabs/CustInvoice"
    import Shareholder from "../tabs/Shareholder"
    import CustManager from "../tabs/CustManager"
    import ActualController from "../tabs/ActualController"
    import FinanceReport from "../tabs/FinanceReport"
    import FtUser from "../ft/FtUser"
    import FtCustomerChangeType from "../ft/FtCustomerChangeType"
    import FtUserWithFilter from "../ft/FtUserWithFilter"
    import FtInput from "../ft/FtInput"
    import {existsCustName, existsCustNo, identityCorpFormat} from "@/pages/pc/assets/js/validate/rule.js"
    import Investment from "../tabs/Investment";
    import {categories} from 'lss-ui/src/components/js/AttachClass'

    export default {
        name: "CustomerCorpChangeForm",
        props: {
            customerId: String,
            editable: Boolean,
            initEdit: Boolean,
            taskId: String,

        },
        components: {
            Investment,
            FinancingInfo,
            GuaranteeInfo,
            PurchaseChannels,
            SalesChannels,
            CorpInfo,
            Linkman,
            BankAccount,
            CustInvoice,
            CustManager,
            Shareholder,
            ActualController,
            FinanceReport,
            FtUser,
            FtUserWithFilter,
            FtInput,
            FtCustomerChangeType
        },

        watch: {
            corp: {
                handler(val) {
                    // 过滤条件
                    let viceManagerFilter = ''
                    if (val.deptId) {
                        viceManagerFilter = 'dt.dept_id = \'' + val.deptId + '\''
                    }
                    this.$refs.viceManagerRef.load(viceManagerFilter)
                },
                deep: true,
            },
        },
        mounted() {
            this.load()
            this.loadUpload(this.customerId)
            categories(this, 'AttachClass', rest => {
                this.attachClass = rest
            })
        },
        data() {
            //根据客户名称判断是否已存在、
            let validateCustName = (rule, value, callback) => {
                const _this = this
                if (this.corpbak.customerName && value !== this.corpbak.customerName
                    && value && value !== '') {
                    existsCustName(_this, rule, value, callback)
                } else {
                    callback()
                }
            }
            //根据证件号码判断是否已存在 num
            let validateCustNum = (rule, value, callback) => {
                const _this = this
                if (this.corp.identityType == '') {
                    callback(new Error('请选择客户证件类型'))
                } else {
                    if (value && value != '') {
                        if (!identityCorpFormat(this.corp.identityType, value)) {
                            callback(new Error('输入证件号码不合法'))
                        } else if (this.corpbak.identityNo !== value) {
                            // 当前的证件号与备份证件号不同时才需要校验是否重复
                            existsCustNo(_this, rule, value, callback)
                        } else {
                            callback()
                        }
                    } else {
                        callback()
                    }
                }
            }
            return {

                //当前登录人的任务是否已经完成，true:没完成，false:已完成
                ifTaskFinished:true,
                tabsindex: '0',
                fileList: [],
                //附件分类
                attachClass: [],
                corp: {
                    customerId: '',
                    customerName: '',
                    identityType: '',
                    identityNo: '',
                    customerProperty: '',
                    mainManagerId: '',
                    viceManagerId: '',
                    mainManagerName: '',
                    viceManagerName: '',
                    deptName: '',
                    deptId: '',
                },
                categoriesDisabled: {
                    融资业务申请书: {
                        upload: true, delete: false
                    },
                },
                corpbak: {},
                saveStatus: false,
                editMain: true,
                showTabInfo: false,
                showTabShareholder: false,
                showTabFinance: false,
                showTabAtt: false,
                showTabInv: false,
                showTabMar: false,
                showTabGua: false,
                infoMenu: [],
                fengbaoFinReportUrl: null,
                registeredAddress: '',
                dataVersion: 0,
                outTime: 0,
                rules: {
                    customerName:
                        [{required: true, message: '客户名称不能为空', trigger: 'blur'},
                            {max: 80, message: '不能超过80字符', trigger: 'blur'},
                            {validator: validateCustName, trigger: 'blur'}],
                    identityType:
                        [{required: true, message: '证件类型不能为空', trigger: 'change'}],
                    identityNo:
                        [{required: true, message: '证件类型不能为空', trigger: 'blur'},
                            {max: 50, message: '不能超过50字符', trigger: 'blur'},
                            {validator: validateCustNum, trigger: 'blur'}],
                    changeType:
                        [{required: true, message: '变更类型不能为空', trigger: 'blur'}],
                    changeRemark:
                        [{required: true, message: '变更说明不能为空', trigger: 'blur'},
                            {max: 1000, message: '不能超过1000字符', trigger: 'blur'}],
                    mainManagerId:
                        [{required: true, message: '主办客户经理不能为空', trigger: 'change'}],
                    viceManagerId:
                        [{required: true, message: '协办客户经理不能为空', trigger: 'change'}],
                },
            }
        },
        methods: {
            // 审批流校验
            validate(done) {
                let errorMessage = [];
                //表单校验
                if (!this.corp.changeType) {
                    errorMessage.push("请维护变更类型")
                }
                if (!this.corp.changeRemark) {
                    errorMessage.push("请维护变更说明")
                }
                if (errorMessage.length > 0) {
                    this.$message.error(errorMessage.join(' , '))
                } else if(errorMessage.length === 0){
                    //前台校验通过时，执行审批流代码
                    done()
                }
            },
            runTask(val){
                this.ifTaskFinished=val
            },
            matchingDept(val) {
                this.$set(this.corp, 'deptId', val.deptId)
            },
            tab(val) {
                this.tabsindex = val.name;
            },
            goBackList() {
                this.$emit('changeToList');
            },
            load() {
                this.$http.get('/joys-rest/lss-customer/custInfo/corp/' + this.customerId).then(
                    resp => {
                        this.corp = resp.body
                        this.dataVersion = this.corp.dataVersion
                        if (this.corp.infoMenu && this.corp.infoMenu != '') {
                            //初始化tab页签显示, 设置显示那个页签
                            if (this.corp.infoMenu.indexOf('tabAtt') > -1) {
                                this.showTabAtt = true
                                this.tabsindex = "6"
                            }
                            if (this.corp.infoMenu.indexOf('showTabGua') > -1) {
                                this.showTabGua = true
                                this.tabsindex = "5"
                            }
                            if (this.corp.infoMenu.indexOf('showTabMar') > -1) {
                                this.showTabMar = true
                                this.tabsindex = "4"
                            }
                            if (this.corp.infoMenu.indexOf('showTabInv') > -1) {
                                this.showTabInv = true
                                this.tabsindex = "3"
                            }
                            if (this.corp.infoMenu.indexOf('tabFinance') > -1) {
                                this.showTabFinance = true
                                this.tabsindex = "2"
                            }
                            if (this.corp.infoMenu.indexOf('tabShareholder') > -1) {
                                this.showTabShareholder = true
                                this.tabsindex = "1"
                            }
                            if (this.corp.infoMenu.indexOf('tabInfo') > -1) {
                                this.showTabInfo = true
                                this.tabsindex = "0"
                            }
                        }
                        this.corpbak = JSON.parse(JSON.stringify(this.corp))
                    },
                    resp => {
                        this.$message.error(resp.body)
                    })
            },
            //关键信息保存
            onSave() {
                const _this = this
                _this.saveStatus = true
                _this.corp.dataVersion = this.dataVersion
                _this.corp.customerType = 'ENTERPRISE'
                _this.$refs.corp.validate((valid) => {
                    if (valid) {
                        let deptName = _this.corp.deptName
                        _this.$http.put('/joys-rest/lss-customer/custInfo/corp', _this.corp, {
                            params: {
                                sourceModule: "基础关键资料",
                            }
                        }).then(resp => {
                            _this.corp = resp.body
                            _this.corp.deptName = deptName
                            _this.corpbak = _this.corp
                            _this.editMain = true
                            _this.saveStatus = false
                            _this.dataVersion = _this.corp.dataVersion
                            _this.$message.success('保存成功!')
                        }, resp => {
                            _this.saveStatus = false
                            _this.$message.error('操作异常')
                        })
                    } else {
                        _this.saveStatus = false
                        return false
                    }
                })
                _this.saveStatus = false
            },
            //表单取消按钮
            cancel() {
                this.editMain = true
                this.corp = this.corpbak
                this.$refs.corp.clearValidate()
            },
            //corpInfo保存回调
            infoValue: function (val) {
                this.dataVersion = val
            },
            //表单编辑按钮
            edit() {
                this.editMain = false
                //备份当前表单
                this.corpbak = JSON.parse(JSON.stringify(this.corp))
            },
            //增加tab页
            addTab(model) {
                if ('tabInfo' === model) {
                    this.showTabInfo = true
                    this.tabsindex = "0"
                }
                if ('tabShareholder' === model) {
                    this.showTabShareholder = true
                    this.tabsindex = "1"
                }
                if ('tabFinance' === model) {
                    this.showTabFinance = true
                    this.tabsindex = "2"
                }
                if ('showTabInv' === model) {
                    this.showTabInv = true
                    this.tabsindex = "3"
                }
                if ('showTabMar' === model) {
                    this.showTabMar = true
                    this.tabsindex = "4"
                }
                if ('showTabGua' === model) {
                    this.showTabGua = true
                    this.tabsindex = "5"
                }
                if ('tabAtt' === model) {
                    this.showTabAtt = true
                    this.tabsindex = "6"
                }
                if (this.corp.infoMenu && this.corp.infoMenu !== '') {
                    this.corp.infoMenu = this.corp.infoMenu + ';' + model
                } else {
                    this.corp.infoMenu = model
                }
                this.$http.post('/joys-rest/lss-customer/custInfo/tabs/' + this.customerId, null, {
                    params: {
                        'infoMenu': this.corp.infoMenu,
                        'customerType': this.corp.customerType
                    }
                }).then(resp => {

                })
            },
            //主办客户经理回调
            mainManagerChangeMatched(val) {
                this.$set(this.corp, 'mainManagerId', val.userId)
                this.$set(this.corp, 'deptName', val.deptName)
                this.$set(this.corp, 'deptId', val.deptId)
                this.corp.mainManagerName = val.userName
            },
            //协办客户经理回调
            viceManagerChangeMatched(val) {
                this.$set(this.corp, 'viceManagerId', val.userId)
                this.corp.viceManagerName = val.userName
            },
            invoiceAddress(val) {
                this.registeredAddress = val;
            },
            loadUpload() {
                this.fileList = []
                this.$http.get('/joys-rest/joys-file/file/lsfile/parent/' + this.parentId).then(
                    resp => {
                        this.fileList = resp.body
                    },
                    resp => {
                        this.$message.error(resp.body.message)
                    })
            },
            download(file) {
                window.open(
                    window.location.origin + '/joys-rest/joys-file/file/byFileId?fileId=' + file.fileId)
            },

        }
    }
</script>
<style>
    .add-tabs-menu {
        padding: 0px;
        margin: 0px;
        backgroud-color: #353737;
    }

    .add-tabs_menu.el-dropdown-menu {
        padding: 0px;
        margin: 0px;
        backgroud-color: #353737;
    }

    .add-tabs-menu .el-dropdown-menu__item {
        padding: 0px;
        background: #353737;
    }

    .add-tabs-item.el-dropdown-menu__item {
        color: #C0C1C4;
        background: #353737;
    }

    .add-tabs-item.el-dropdown-menu__item.is-disabled {
        opacity: 0.3;
    }

    .add-tabs-item.el-dropdown-menu__item:focus, .dropdown-item.el-dropdown-menu__item:not(.is-disabled):hover {
        padding: 0px;
        color: #FFFFFF;
        background: #001616;
    }

    .add-tabs-item.el-dropdown-menu__item:not(.is-disabled):hover, .dropdown-item.el-dropdown-menu__item:focus {
        padding: 0px;
        color: #FFFFFF;
        background: #001616;
    }

    .add-tabs-item:active {
        padding: 0px;
        color: #FFFFFF;
        background: #001616;
    }

    .add-tabs-menu.el-popper[x-placement^="bottom"] {
        margin-top: 6px;
    }

    .add-tabs-menu.el-popper[x-placement^="bottom"] .popper__arrow {
        border-bottom-color: #353737;
    }

    .add-tabs-menu.el-popper[x-placement^="bottom"] .popper__arrow::after {
        border-bottom-color: #353737;
    }

    .tab .tabShow {
        padding: 20px;
        width: 100%;
    }

    .tabShow .tabul {
        height: 54px;
        margin: 0px;
        /* background:skyblue; */
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
    }

    .tabShow .tabul .tabli {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .tabShow .tabul .tabli .count {
        height: 100%;
        width: 100px;
        line-height: 54px;
        text-align: Center;
        position: relative;
    }

    .tabShow .tabul .tabli.active .count {
        color: #D62F17;
    }

    .tabShow .tabul .tabli.active .count .line {
        height: 4px;
        width: 60px;
        background: #D62F17;
        position: absolute;
        bottom: -2px;
        left: 20px;
    }

    .tabShow .tabCon {
        width: 100%;
        /*margin-top: 10px;*/
        font-size: 18px;
        flex-grow: 1;
        overflow-y: auto;
        height: 560px;
    }

    .tab .showOn {
        width: 100%;
        height: 200px;
        border-top: 1px solid #ccc;
        background: skyblue;
    }

    .tab .codeShow {
        cursor: pointer;
        width: 100%;
        height: 44px;
        border-top: 1px solid #ccc;
        position: relative;
    }

    .codeShow .trangleDown {
        width: 0;
        height: 0;
        border-width: 8px 8px 0;
        border-style: solid;
        border-color: rgb(211, 220, 230) transparent transparent;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -4px 0 0 -4px;
    }

    .codeShow .trangleUp {
        width: 0;
        height: 0;
        border-width: 0px 8px 8px;
        border-style: solid;
        border-color: transparent transparent rgb(211, 220, 230);
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -4px 0 0 -4px;
    }

    .codeShow .code {
        opacity: 0;
        color: rgb(211, 220, 230);
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -10px 0 0 20px;
    }

    .tab:hover .trangleDown {
        transition: all .3s ease 0s;
        transform: translateX(-40px);
    }

    .tab:hover .trangleUp {
        transition: all .3s ease 0s;
        transform: translateX(-40px);

    }

    .tab:hover .code {
        transition: all .3s ease 0s;
        transform: translateX(-30px);
        opacity: 1;
    }

    .codeShow:hover .trangleDown {
        border-color: #409eff transparent transparent;
    }

    .codeShow:hover .trangleUp {
        border-color: transparent transparent #409eff;
    }

    .codeShow:hover .code {
        color: #409eff;
    }

    .form-textarea {
        overflow: hidden;
        display: -webkit-box; /*必须结合的属性，将对象作为弹性伸缩盒子模型显示*/
        -webkit-box-orient: vertical; /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式*/
        -webkit-line-clamp: 2 /*用来限制在一个块元素显示的文本的行数*/
    }
</style>
<style scoped>
    .cardBackColor {
        background-color: #F4F8F9
    }
</style>
